<template>
  <div class="detail-wrap">
    <el-form class="query-form"
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        size="small"
        label-width="">
        <el-form-item class="big-query" label="关键词"
          prop="keyword">
          <el-input v-model="queryParams.keyword"
            placeholder="请输入关键词"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
            @clear="handleQuery" />
        </el-form-item>
        <el-form-item label="是否受邀用户" prop="status">
            <el-select v-model="queryParams.status">
               <el-option label="全部" value=""></el-option>
               <el-option label="被邀请人" value="invitee"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            size="small"
            @click="handleQuery">搜索</el-button>
          <el-button size="small"
            @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="inviteList">
        <el-table-column label="用户ID" prop="user_id" />
        <el-table-column label="用户昵称" prop="nick_name" />
        <el-table-column label="注册时间" prop="created_at">
          <template slot-scope="scope">
            {{ formatTime(scope.row.created_at) }}
          </template>
        </el-table-column>
        <el-table-column label="邀请人ID" prop="inviter">
          <template slot-scope="scope">
            {{ scope.row.inviter || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="是否受邀用户">
          <template slot-scope="scope">
            {{ scope.row.inviter ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column label="成功邀请数" prop="invite_count" />
        <el-table-column label="是否会员" prop="is_vip">
          <template slot-scope="scope">
            {{ scope.row.is_vip ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column label="是否安装产品" prop="is_install">
          <template slot-scope="scope">
            {{ scope.row.is_install ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click.stop="getInviterList(scope.row)">邀请详情</el-button>
          </template>
        </el-table-column>
    </el-table>
    <div class="pagination-wrap">
        <pagination v-show="total > 0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.page_size"
        @pagination="getJoinList" />
    </div>
    <el-dialog title="累计邀请用户信息" :visible.sync="showInviteDialog" width="600px" :close-on-click-modal="false" :append-to-body="true" top="20vh">
      <el-table :data="inviteUserList">
        <el-table-column label="用户"  prop="invitee_name" />
        <el-table-column label="注册时间" prop="created_at">
          <template slot-scope="scope">
            <span>{{formatTime(scope.row.created_at)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <span>{{scope.row.status === 'accept' ? '待安装插件并登录':'邀请成功'}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { parseTime } from '@/utils'
import { getJoinList, get_inviter_invites } from '@/api/task'
export default {
  props: {
    currentId: [Number, String]
  },
  data () {
    return {
      queryParams: {
        page: 1,
        page_size: 10,
        group_id: '',
        keyword: '',
        status: ''

      },
      inviteList: [],
      total: 0,
      loading: true,
      showInviteDialog: false,
      inviteUserList: []
    }
  },
  watch: {
    currentId () {
      this.getJoinList()
    }
  },
  computed: {
    formatTime () {
      return (time) => {
        return parseTime(time, '{y}-{m}-{d}')
      }
    }
  },
  methods: {
    // 点击搜索
    handleQuery () {
      this.queryParams.page = 1
      this.getJoinList()
    },
    // 重置
    resetQuery () {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    getJoinList () {
      this.loading = true
      getJoinList({
        ...this.queryParams,
        ...{
          group_id: this.currentId
        }
      }).then(res => {
        this.inviteList = res.data.list
        this.total = res.data.count || 0
      }).finally(() => {
        this.loading = false
      })
    },
    getInviterList ({ user_id }) {
      this.inviteUserList = []
      get_inviter_invites({
        page: 1,
        page_size: 10,
        group_id: this.currentId,
        user_id
      }).then(res => {
        this.inviteUserList = res.data.list
        this.showInviteDialog = true
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
